<form class="form-horizontal" novalidate name="forms.materiaForm" ng-submit="forms.materiaForm.$valid && saveOrUpdateMateriaTemplate(forms.materiaForm)">

    <div class="form-group">
        <div class="col-md-4">
            <label>Retailer </label>
            <organization-auto-complete ng-model="itemMateriaTemplate.retailerId" tag="Retailer" allow-clear="true" required></organization-auto-complete>
        </div>
        <div class="col-md-4">
            <label>Material Template</label>
            <ui-select ng-model="itemMateriaTemplate.materialTemplateId" style="border-radius: 4px;" required>
                <ui-select-match allow-clear="true">{{$select.selected.name}}</ui-select-match>
                <ui-select-choices repeat="materiaTemplate.id as materiaTemplate in materiaTemplates" refresh="getMaterialTemplates($select.search)"
                    refresh-delay="1000">
                    {{materiaTemplate.name}}
                </ui-select-choices>
            </ui-select>
        </div>
    </div>
    <div style="text-align:right;" permission-check="{{'item::itemSpec_write'}}">
        <waitting-btn type="submit" btn-class="btn blue"
                      value="submitLabel" is-loading="loading"></waitting-btn>
        <button ng-click="resetMaterialTemplate()" type="button" class="btn grey">Reset</button>
    </div>
</form>
<div class="portlet light box-shadow-none" ng-show="itemMateriaTemplates.length>0" style="padding-left:0px; padding-right:0px;">
    <div class="portlet-title">
        <div class="caption">
            <span class="caption-subject bold uppercase">Material Template List</span>
        </div>
    </div>
    <div class="portlet-body">
        <div class="table-scrollable">
            <table class="table table-striped table-bordered table-hover">
                <thead>
                    <tr>
                        <th>Item Name</th>
                        <th>Retailer</th>
                        <th> Material Template Name</th>
                        <th permission-check="{{'item::itemSpec_write'}}">Action</th>
                    </tr>
                </thead>
                <tbody>
                    <tr ng-repeat="itemMateriaTemplate in materialTemplatesView track by $index" ng-class="{'bg-light-green':hightLights[$index]}">
                        <td>{{itemMateriaTemplate.itemSpecName}}</td>
                        <td>{{itemMateriaTemplate.retailerName}}</td>
                        <td>{{itemMateriaTemplate.materialTemplateName}}</td>
                        <td  permission-check="{{'item::itemSpec_write'}}">
                            <a ng-click="editItemMateriaTemplate($index)">Edit</a> | <a ng-click="deleteItemMateriaTemplate($index)">Delete</a>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    <pager total-count="itemMateriaTemplates.length" page-size="pageSize" load-content="loadContent(currentPage)"></pager>
</div>